<template>
  <div class="film">
    <div class="filmLeft">
      <h3>屏幕</h3>
      <ul>
        <li
          v-for="(item, index) in nowSession. seats"
          :key="index"
          class="seat"
          :class="{
            noSeat: nowSession.seats[index] == -1,
            seatSpace:nowSession. seats[index] == 0,
            seatActive:nowSession. seats[index] == 1,
            seatNoUse:nowSession. seats[index] == 2,
          }"
          @click="handleClick(index)"
        ></li>
      </ul>
    </div>
    <div class="filmRight">
      <div class="rightTop">
        <div class="rightTopleft">
          <a href="#">
            <img :src="filmInfo.filmImg" alt="..." height="200"/>
          </a>
        </div>
        <div class="rightTopRight">
          <p>
            中文名：<strong>{{ filmInfo.name }}</strong>
          </p>
          <p>英文名：{{ filmInfo.nameEnglish }}</p>
          <p>剧情：{{ filmInfo.storyType }}</p>
          <p>版本：{{ filmInfo.copyRight }}</p>
          <p>{{ filmInfo.place }} / {{ filmInfo.timeLength }}</p>
          <p>{{ filmInfo.timeShow }}</p>
        </div>
      </div>
      <div class="rightBootom">
        <p>
          影院：<strong>{{ filmInfo.cinema }}</strong>
          <!--              :key="item.value"-->

          <!--          <select-->
          <!--            v-model="goodsId"-->
          <!--            style="-->
          <!--              width: 200px;-->
          <!--              height: 30px;-->
          <!--              margin-top: 5px;-->
          <!--              margin-bottom: 5px;-->
          <!--              margin-left: 10px;-->
          <!--            "-->
          <!--          >-->
          <!--            <option value="">请选择所要购买产品</option>-->
          <!--            <option-->
          <!--              v-for="item in kindList"-->
          <!--              :key="item.id"-->
          <!--              v-bind:value="item.id"-->
          <!--              v-text="item.name"-->
          <!--            ></option>-->
          <!--          </select>-->
        </p>

        <p>
          影厅：
          <!--          <strong>{{ filmInfo.room }}</strong>-->
          <el-select @change="onChangeCinema" v-model="selectedCinema" class="m-2" placeholder="Select" size="small">
            <el-option
              v-for="item in options"

              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
        <p>
          场次：
          <!--          select 的回调-->
          <!--          <strong>{{ filmInfo.time }}</strong>-->
          <el-select @change="onChangeSession" v-model="selectedSession" class="m-2" placeholder="Select" size="small">
            <el-option
              v-for="item in sessions"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </p>
        <!--        <p v-show="nowSession.count<=5" id="seatSelect">-->
        <!--          座位：<span v-for="(item, index) in nowSession.curSeatDisp" :key="index">{{-->
        <!--            item-->
        <!--          }}</span>-->
        <!--        </p>-->

        <!--        v-show="nowSession.count>5"-->
        <!--        v-for= 前面5个-->
        <div id="seatSelectMore5">
          <div>
            座位：<span  v-for="(item, index) in nowSession.curSeatDisp.slice(0,5)" :key="index">{{
            item
          }}</span>

          </div>

          <div class="line2">
          <span v-for="(item, index) in nowSession.curSeatDisp.slice(5)" :key="index">{{
            item
          }}</span>
          </div>
        </div>
        <p class="tip-p">
          已选择<strong style="color: red">{{ nowSession.count }}</strong
        >个座位，<strong style="color: red"
        >再次单击座位可取消。<span v-if="nowSession.maxFlag">您一次最多只能买{{zhList[nowSession.maxLength]}}张票！</span></strong
        >
        </p>
        <hr/>
        <p>
          单价：<strong>{{ numberFormat(filmInfo.unitPrice) }}</strong>
        </p>
        <p>
          总价：<strong style="color: red">{{
          numberFormat(fileTotal)
          }}</strong>
        </p>
        <hr/>
        <button type="button" class="btn" @click="filmSubmit">确认下单</button>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from 'vue'
import FileImg from './assets/film1.png'

export default {
  /**
     *
     * @returns {ToRefs<T extends Ref ? T : UnwrapRefSimple<T>>&{onChangeSession: *, numberFormat: *, fileTotal: *, handleClick: *, onChangeCinema: *}}
     */
  setup () {
    //   const value = ref('')
    // const value = ref('')
    // const sessions = [
    //   {
    //     id: 1,
    //     // value: 'Option1',
    //     value: 1,
    //     label: 'Option1'
    //   },
    //   {
    //     id: 2,
    //     value: 2,
    //     label: 'Option2'
    //   },
    //   {
    //     id: 3,
    //     // value: 'Option3',
    //     value: 3,
    //     label: 'Option3'
    //   },
    //   {
    //     id: 4,
    //     value: 4,
    //     // value: 'Option4',
    //     label: 'Option4'
    //   },
    //   {
    //     id: 5,
    //     value: 5,
    //     // value: 'Option5',
    //     label: 'Option5'
    //   }
    // ]

    // const options = [
    //   {
    //     id: 1,
    //     // value: 'Option1',
    //     value: 1,
    //     label: 'Option1'
    //   },
    //   {
    //     id: 2,
    //     value: 2,
    //     label: 'Option2'
    //   },
    //   {
    //     id: 3,
    //     // value: 'Option3',
    //     value: 3,
    //     label: 'Option3'
    //   },
    //   {
    //     id: 4,
    //     value: 4,
    //     // value: 'Option4',
    //     label: 'Option4'
    //   },
    //   {
    //     id: 5,
    //     value: 5,
    //     // value: 'Option5',
    //     label: 'Option5'
    //   }
    // ]
    //
    const cinemaCnt = 5

    const makeCinemaOps = (cinemaCnt) => {
      const options = []

      for (let i = 1; i <= cinemaCnt; i++) {
        options.push({
          id: i,
          value: i,
          label: '影院' + i
        })
      }
      return options
    }

    const makeOps = (cinemaCnt, tplName) => {
      const options = []

      for (let i = 1; i <= cinemaCnt; i++) {
        options.push({
          id: i,
          value: i,
          label: tplName + i
        })
      }
      return options
    }

    const options = makeCinemaOps(cinemaCnt)
    const sessions = makeOps(cinemaCnt, '场次')

    // let
    // 好多的影院
    // const cinemaMap = new Map()
    // const cinemaMap = new Map()
    const makeCinemas = (cinemaCnt) => {
      const cinemaMap = new Map()
      // for (const i of 3) {
      // for (const i in 3) {
      for (let i = 1; i <= cinemaCnt; i++) {
        // 这个不行吗
        // console.log('i')
        // console.log(i)
        cinemaMap.set(i, makeSession(5))
      }
      return cinemaMap
    }
    const seats = [
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
      0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0,
      2, 2, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, -1, -1, -1, 0, 0, 0, 0, 0, 0,
      -1, -1
    ]

    const makeSession = (SessionCnt) => {
      const sessionMap = new Map()
      // for (const i of 3) {
      // for (const i in 3) {
      for (let i = 1; i <= SessionCnt; i++) {
        // console.log('i')
        // console.log(i)
        const seatsHere = seats.slice(0)

        sessionMap.set(i, {
          seats: seatsHere,
          selectedSeats: [],
          curSeat: [],
          curSeatDisp: [],
          count: 0,
          // maxLength: 5,
          maxLength: 10,
          maxFlag: false,
          seatCol: 10,
          filmInfo: {
            name: '囧妈' + i,
            nameEnglish: 'Lost in Russia',
            copyRight: '中文2D',
            filmImg: FileImg,
            storyType: '喜剧',
            place: '中国大陆',
            timeLength: '126分钟',
            timeShow: '2020.02',
            cinema: '万达影城',
            room: '8号影厅',
            time: '2021.05.18（周二）20:00',
            unitPrice: 38
          }
        })
      }
      return sessionMap
    }
    const cinemaMap = makeCinemas(5)
    console.log('cinemaMap')
    console.log(cinemaMap)
    const nowSession = cinemaMap.get(1).get(1)
    // const initSeats = cinemaMap.get(1).get(1)
    const initSeats = nowSession.seats
    // console.log()

    // cinemaMap.set(1, [
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0,
    //   2, 2, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, -1, -1, -1, 0, 0, 0, 0, 0, 0,
    //   -1, -1
    // ])
    // cinemaMap.set(2, [
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    //   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0, 0, 0, 0, 0, 0, 0, 2, 2, 0,
    //   2, 2, 0, 0, -1, 0, 0, 0, 0, 0, 0, 0, 0, -1, -1, -1, 0, 0, 0, 0, 0, 0,
    //   -1, -1
    // ])

    const state = reactive({
      nowSession: nowSession,
      curSeat: [],
      curSeatDisp: [],
      count: 0,
      // maxLength: 5,
      maxLength: 10,
      maxFlag: false,
      seatCol: 10,
      seatflag: initSeats,
      filmInfo: {
        name: '囧妈',
        nameEnglish: 'Lost in Russia',
        copyRight: '中文2D',
        filmImg: FileImg,
        storyType: '喜剧',
        place: '中国大陆',
        timeLength: '126分钟',
        timeShow: '2020.02',
        cinema: '万达影城',
        room: '8号影厅',
        time: '2021.05.18（周二）20:00',
        unitPrice: 38
      },
      // 场次只有一个电影
      kindList: [
        {
          name: '小可爱',
          id: 1
        },
        {
          name: '小仙女',
          id: 2
        },
        {
          name: '小宝龙',
          id: 3
        }
      ],
      options,
      selectedCinema: 1,
      selectedSession: 1,
      sessions
    })
    // 方法代替过滤器
    const numberFormat = (value) => '￥' + value.toFixed(2)
    const onChangeSession = (value) => {
      freshSeats()
      // console.log('state.selectedCinema')
      // console.log(state.selectedCinema)
      // // option1 拿到的是value
      // // const cinemaeId = state.selectedCinema.id
      // const cinemaeId = state.selectedCinema
      // const selectedSessionId = state.selectedSession
      // const sessions = cinemaMap.get(cinemaeId)
      // console.log('sessions')
      // console.log(sessions)
      // const seatsArr = sessions.get(selectedSessionId)
      // console.log('cinemaeId')
      // console.log(cinemaeId)
      // // 是的 是引用
      // state.seatflag = seatsArr
      // state.seatflag = cinemaMap.get(cinemaeId)
    }

    const freshSeats = () => {
      // console.log('state.selectedCinema')
      // console.log(state.selectedCinema)
      // option1 拿到的是value
      // const cinemaeId = state.selectedCinema.id
      const cinemaeId = state.selectedCinema
      const selectedSessionId = state.selectedSession
      // console.log('selectedSessionId')
      // console.log(selectedSessionId)
      const sessions = cinemaMap.get(cinemaeId)
      // console.log('sessions')
      // console.log(sessions)
      const sessionHere = sessions.get(selectedSessionId)

      // const seatsArr = sessions.get(selectedSessionId)
      // console.log('cinemaeId')
      // console.log(cinemaeId)
      // 是的 是引用
      // state.seatflag = seatsArr
      state.seatflag = sessionHere.seats
      // state.seatflag = cinemaMap.get(cinemaeId)

      state.curSeat = sessionHere.curSeat
      state.curSeatDisp = sessionHere.curSeatDisp
      state.count = sessionHere.count
      // maxLength: 5,
      state.maxLength = sessionHere.maxLength
      state.maxFlag = sessionHere.maxFlag
      state.seatCol = sessionHere.seatCol

      state.nowSession = sessionHere
    }
    const onChangeCinema = (value) => {
      freshSeats()
      // console.log('state.selectedCinema')
      // console.log(state.selectedCinema)
      // // option1 拿到的是value
      // // const cinemaeId = state.selectedCinema.id
      // const cinemaeId = state.selectedCinema
      // const selectedSessionId = state.selectedSession
      // console.log('selectedSessionId')
      // console.log(selectedSessionId)
      // const sessions = cinemaMap.get(cinemaeId)
      // console.log('sessions')
      // console.log(sessions)
      // const seatsArr = sessions.get(selectedSessionId)
      // console.log('cinemaeId')
      // console.log(cinemaeId)
      // // 是的 是引用
      // state.seatflag = seatsArr
      // state.seatflag = cinemaMap.get(cinemaeId)
    }

    // 计算属性
    // const fileTotal = computed(() => {
    //   return state.count * state.filmInfo.unitPrice
    // })

    const fileTotal = computed(() => {
      const nowSession = state.nowSession
      console.log('nowSession')
      console.log(nowSession)
      return nowSession.count * nowSession.filmInfo.unitPrice
      // return nowSession.count * state.filmInfo.unitPrice
    })

    const zhList = [null, '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']

    const handleClick = (index) => {
      const nowSession = state.nowSession
      const seats = nowSession.seats
      if (nowSession.seats[index] === 1) {
        seats[index] = 0
        nowSession.curSeat.splice(
          nowSession.curSeat.findIndex((item) => item === index),
          1
        )
      } else {
        // 判断单击座位是否是可选座位并且选中座位数小于5
        // 现在配置成10
        // if (seats[index] === 0 && nowSession.curSeat.length < 5) {
        if (seats[index] === 0 && nowSession.curSeat.length < nowSession.maxLength) {
          seats[index] = 1
          nowSession.curSeat.push(index)
        }
      }
      // 设置当前选中的座位
      nowSession.curSeatDisp = []
      for (const data of nowSession.curSeat) {
        nowSession.curSeatDisp.push(
          Math.floor(data / nowSession.seatCol) +
            1 +
            '行' +
            ((data % nowSession.seatCol) + 1) +
            '列'
        )
      }
      // 计数已经选择了多少个座位
      var mySeat = seats.filter((item) => item === 1)
      nowSession.count = mySeat.length
      // 判断达到购买上限
      // if (nowSession.count >= 5) nowSession.maxFlag = true
      if (nowSession.count >= nowSession.maxLength) {
        nowSession.maxFlag = true
      } else {
        nowSession.maxFlag = false
      }
    }

    // 单击事件处理方法
    // const handleClick = (index) => {
    //   if (state.seatflag[index] === 1) {
    //     state.seatflag[index] = 0
    //     state.curSeat.splice(
    //       state.curSeat.findIndex((item) => item === index),
    //       1
    //     )
    //   } else {
    //     // 判断单击座位是否是可选座位并且选中座位数小于5
    //     if (state.seatflag[index] === 0 && state.curSeat.length < 5) {
    //       state.seatflag[index] = 1
    //       state.curSeat.push(index)
    //     }
    //   }
    //   // 设置当前选中的座位
    //   state.curSeatDisp = []
    //   for (const data of state.curSeat) {
    //     state.curSeatDisp.push(
    //       Math.floor(data / state.seatCol) +
    //         1 +
    //         '行' +
    //         ((data % state.seatCol) + 1) +
    //         '列'
    //     )
    //   }
    //   // 计数已经选择了多少个座位
    //   var mySeat = state.seatflag.filter((item) => item === 1)
    //   state.count = mySeat.length
    //   // 判断达到购买上限
    //   if (state.count >= 5) state.maxFlag = true
    //   else state.maxFlag = false
    // }
    return {
      ...toRefs(state),
      fileTotal,
      handleClick,
      numberFormat,
      onChangeCinema,
      onChangeSession,
      zhList
    }
  }
}
</script>

<!--<style type="less" scoped>-->
<style lang="less" scoped>
  /* @height_film:650px; */
/* @height_film:550px;*/
  /*idea less 注释*/
  /*@height_film:570px;*/
/*  @height_film:600px;*/
  @height_film:640px;
  /*less 定义变量*/

  .tip-p{
    line-height: 20px;
    height: 20px;
    font-size: 14px;
  }

  .film {
    margin: 0 auto;
    width: 1050px;
    border: 1px solid grey;
    /*height: 550px;*/
    /*height: 600px;*/
    /*height: 650px;*/
  height: @height_film;
  }

  .filmLeft {
    width: 550px;
    height: 500px;
    float: left;
  }

  .filmLeft h3 {
    text-align: center;
  }

  .filmLeft ul {
    list-style: none;
  }

  .filmRight {
    /*height: 650px;*/
    width: 500px;
    /*height: 550px;*/
    height: @height_film;
    /*height: 600px;*/
    float: left;
    background-color: bisque;
  }

  .rightTopleft {
    float: left;
    margin: 20px 15px 5px 10px;
  }

  .rightTopRight {
    float: left;
    margin: 0px 0px 5px 5px;
  }

  .rightBootom {
    clear: both;
    margin: 0px 10px;
  }

  /*.rightBootom p {*/
  /*  line-height: 12px;*/
  /*}*/

  .seat {
    float: left;
    width: 30px;
    height: 30px;
    background-color: bisque;
    margin: 5px 10px;
    cursor: pointer;
  }

  .seatNotice {
    float: left;
    width: 30px;
    height: 30px;
    margin: 5px 10px;
    background-color: bisque;
    list-style: none;
    margin-left: 50px;
  }

  .notice {
    float: left;
    height: 30px;
    line-height: 30px;
  }

  .seatSpace {
    background: url("./assets/bg.png") no-repeat 1px -29px;
  }

  .seatActive {
    background: url("./assets/bg.png") 1px 0px;
  }

  .seatNoUse {
    background: url("./assets/bg.png") 1px -56px;
  }

  .noSeat {
    background: url("./assets/bg.png") 1px -84px;
  }

  #filmInformation,
  #filmRightTopLeft {
    float: left;
  }

  #filmRightBottom {
    clear: both;
  }

  #filmInformation h4,
  #filmInformation p {
    font-size: 20px;
    margin-left: 15px;
    margin-bottom: 14px;
  }

  #filmInformation p {
    font-size: 16px;
    margin-left: 15px;
  }

  .sceenRight {
    background-color: bisque;
    height: 650px;
    padding-top: 10px;
  }

  .sceenRight > p {
    color: red;
    font-size: 28px;
  }

  .filmCurrent {
    font-size: 16px;
    margin: 5px;
  }

  .filmCurrent p {
    margin: 15px;
  }

  #seatSelectMore5 {
    width: 400px;
    display: flex;
    flex-direction: column;
  }

  #seatSelectMore5 span {
    width: 100px;
    padding: 5px;
    border: 1px solid red;
    /*margin: 8px;*/
    margin: 4px;
    font-size: 14px;
    background-color: white;
    font-weight: bold;
    color: red;
  }

  #seatSelect {
    display: flex;
  }

  #seatSelect span {
    /*width: 30px;*/
    width: 100px;
    padding: 5px;
    border: 1px solid red;
    margin: 8px;
    font-size: 14px;
    background-color: white;
    font-weight: bold;
    color: red;
  }

  .line2{
    margin-top: 20px;
  }

  .btn {
    margin: 15px 150px;
    width: 120px;
    height: 40px;
    background-color: rgb(68, 168, 135);
    color: white;
    cursor: pointer;
  }

  .tip-p{
    line-height: 20px;
  }
</style>
